<template>
    <div>

        <el-row :gutter="20">
            <el-col :span="20">
                <div class="grid-content bg-purple">
                    <div style="margin:10px 0;">
                        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="success" plain @click="addUser">
                        新增用户</el-button>
                </div>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%" max-height="100%">
            <el-table-column fixed prop="id" label="ID" width="50px">
            </el-table-column>
            <el-table-column prop="account" label="账号" >
            </el-table-column>
            <el-table-column prop="password" label="密码" >
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" >
            </el-table-column>
            <el-table-column prop="status" label="状态" width="50px">
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button @click.native.prevent="editRow(scope)" type="primary" size="small">
                        修改
                    </el-button>
                    <el-button @click.native.prevent="deleteRow(scope)" type="danger" size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="400px">
            <el-form :model="form">
                <el-form-item label="账号：" :label-width="formLabelWidth">
                    <el-input v-model="form.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态：" :label-width="formLabelWidth">
                    <el-switch style="display: span" v-model="form.status" active-color="#13ce66"
                        inactive-color="#ff4949" active-text="激活" inactive-text="禁用" active-value="Y"
                        inactive-value="N">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
        <Pagenation :pageSize="pageInfo.pageSize" 
                    :total="pageInfo.total"
                    :currentPage="pageInfo.pageNum"
                    @sizeChange="sizeChange"
                    @currentChange="currentChange"/>
    </div>
</template>
  
  <script>
  import Pagenation from '@/components/pagenation/index.vue';
import { init } from 'events';
  export default {
      components: { Pagenation },
      data() {
          return {
              title: "",
              tableData: [],
              dialogFormVisible: false,
              formLabelWidth: '60px',
              form: {
                  id: 0,
                  account: '',
                  password: '',
                  status: true
              },
              pageInfo: {
                  pageNum: 1,
                  pageSize: 10,
                  total: 0
              }
          };
      },
      created() {
          this.initTableData()
      },
      methods: {
          addUser() {
              this.dialogFormVisible = true,
                  this.form.account = 0,
                  this.form.account = '',
                  this.form.password = '',
                  this.title = '新增用户'
          },
          submit() {
              if (this.title === '新增用户') {
                  this.$axios.post("rbacManager/addOne", this.form).then(
                      res => {
                          if (res.data.code === 500) {
                              this.$message.error(res.data.msg);
                          } else {
                              this.$message.success(res.data.msg);
                              this.initTableData();
                              this.dialogFormVisible = false;
                          }
                      }
                  ).catch();
              } else if (this.title === '修改用户') {
                  this.$axios.post("rbacManager/editOne", this.form).then(
                      res => {
                          if (res.data.code === 500) {
                              this.$message.error(res.data.msg);
                          } else {
                              this.$message.success(res.data.msg);
                              this.initTableData();
                              this.dialogFormVisible = false;
                          }
                      }
                  ).catch();
  
              }
  
          },
          deleteRow(scope) {
              this.$axios.get("rbacManager/deleteOne?id=" + scope.row.id).then(
                  res => {
                      if (res.data.code === 200) {
                          this.$notify({
                              title: '成功',
                              message: res.data.msg,
                              type: 'success'
                          });
                      } else {
                          this.$notify.error({
                              title: '错误',
                              message: res.data.msg
                          });
                      }
                      this.initTableData()
                  }
              ).catch();
          },
          editRow(scope) {
              this.title = '修改用户';
              let r = scope.row;
              this.form.id = r.id;
              this.form.account = r.account;
              this.form.password = r.password;
              this.form.status = r.status;
              this.dialogFormVisible = true;
          },
          initTableData() {
              this.$axios.get("rbacManager/findAll/" + 
              this.pageInfo.pageNum + 
              "/" + this.pageInfo.pageSize).then(
                  res => {
                      this.tableData = res.data.data.list;
  
                      this.pageInfo.pageNum = res.data.data.pageNum;
                      this.pageInfo.pageSize = res.data.data.pageSize;
                      this.pageInfo.total = res.data.data.total;
  
                  }
              ).catch();
          },
          sizeChange(val){
            this.pageInfo.pageSize = val;
            this.initTableData();
          },   
          currentChange(val){
            this.pageInfo.pageNum = val;
            this.initTableData();
          }

      }
  
  }
  </script>